<html lang=zh-cn>
<head>
    <meta charset=utf-8 />
    <title>轮播</title>
    <style>
        *{padding: 0;margin: 0;font-size: 12px;font-family: 'Microsoft Yahei';color: #333;}
        li {
            list-style: none;
        }
        img {
            border: none;
        }
        a {
            text-decoration: none;
        }
        .cle{ clear:both;}
        .clear {
            zoom: 1;
        }
        .clear:after {
            display: block;
            content: '';
            clear: both;
        }

        .banner{
            width:1200px;
            height:500px;
            margin:0 auto;
        }
        .ban_mask{
            width:100%;
            height:100%;
            position:relative;
            overflow:hidden;
        }
        .ban_ul{
            position:absolute;
            height:100%;
            top:0;
            left:0;
            z-index:99;
        }
        .ban_ul li{
            float:left;
            height:100%;
        }
        .ban_ul li img{
            width:100%;
            height:100%;
        }
        .ban_dot{
            position:absolute;
            z-index:100;
            bottom:10px;
        }
        .ban_dot .doti{
            background-color:rgba(255,255,255,1);
        }
        .ban_dot i{
            display:block;
            width:12px;
            height:12px;
            border-radius:6px;
            float:left;
            margin-right:10px;
            background-color:rgba(255,255,255,0.5);
            cursor:pointer;
            font-style:normal;
        }
        .ban_dir{
            z-index:100;
            height:59px;
            width:1200px;
            position:absolute;
        }
        .ban_dir b{
            position:absolute;
            font-weight:400;
            display:block;
            width:31px;
            height:59px;
            cursor:pointer;
        }
        .ban_dir .dir_l{
            left:15px;
            background:url(images2/img17.png) no-repeat;
        }
        .ban_dir .dir_r{
            right:20px;
            background:url(images2/img18.png) no-repeat;
        }
    </style>
    <script src="js/jquery/jquery-3.2.1.js"></script>
    <script>
        $(function(){
            var fu=$(".ban_mask");
            var fu_w=$(".ban_mask").width();
            var fu_h=$(".ban_mask").height();
            var zi=$(".ban_ul");
            var num=0;
            var inum=0;
            var timer=null;
            var time=3000;
            var li_l=zi.find("li").length;
            $(".ban_dir").css("top",fu_h/2-29.5);
            zi.width(fu_w*li_l);
            zi.find("li").width(fu_w);
            var dot_l=fu_w/2-($(".ban_dot").width()-10)/2;
            $(".ban_dot").css("left",dot_l);
            Timer();

            fu.on('click','.ban_dot i',function(){
                clearInterval(timer);
                $(".ban_dot i").each(function(){
                    $(this).removeClass("doti");
                });
                $(this).addClass("doti");
                var several=$(this).index();
                num=several;
                inum=several;
                var ul_l=-(several*fu_w);
                $(this).parents(fu).find(zi).animate({"left":ul_l+"px"},500);
                Timer();
            });

            fu.on('click','.ban_dir .dir_l',function(){
                clearInterval(timer);
                if(inum==0){
                    inum=li_l-1;
                }
                else{
                    inum--;
                }
                num--;
                if(num<0){
                    num=li_l-1;
                }
                var ul_l1=-(num*fu_w);
                $(fu).find(".ban_dot i").removeClass("doti");
                $(fu).find(".ban_dot i").eq(inum).addClass('doti');
                $(fu).find(zi).animate({"left":ul_l1+"px"},500);
                Timer();
            });

            fu.on('click','.ban_dir .dir_r',function(){
                clearInterval(timer);
                if(inum==li_l-1){
                    inum=0;
                }
                else{
                    inum++;
                }
                num++;
                if(num==li_l){
                    num=0;
                }
                var ul_l1=-(num*fu_w);
                $(fu).find(".ban_dot i").removeClass("doti");
                $(fu).find(".ban_dot i").eq(inum).addClass('doti');
                $(fu).find(zi).animate({"left":ul_l1+"px"},500);
                Timer();
            });

            function Timer(){
                clearInterval(timer);
                timer=setInterval(automatic,time);
            }

            function automatic(){
                if(inum==li_l-1){
                    inum=0;
                }
                else{
                    inum++;
                }
                num++;
                if(num==li_l){
                    num=0;
                }
                var ul_l1=-(num*fu_w);
                $(fu).find(".ban_dot i").removeClass("doti");
                $(fu).find(".ban_dot i").eq(inum).addClass('doti');
                $(fu).find(zi).animate({"left":ul_l1+"px"},500);
            }

            fu.on("mouseover",fu,function(){
                clearInterval(timer);
            });
            fu.on("mouseout",fu,function(){
                Timer();
            });

        })
    </script>
</head>
<body>
<div class="banner">
    <div class="ban_mask">
        <ul class="ban_ul">
            <li><a href="#"><img src="images2/u14.png"></a></li>
            <li><a href="#"><img src="images2/u15.png"></a></li>
            <li><a href="#"><img src="images2/u16.png"></a></li>
        </ul>
        <div class="ban_dot">
            <i class="doti"></i>
            <i></i>
            <i></i>
        </div>
        <div class="ban_dir">
            <b class="dir_l"></b>
            <b class="dir_r"></b>
        </div>
    </div>
</div>
</body>
</html>